<template>
  <div class="richtext-editor">
    <div class="editor-toolbar">
      <el-button-group>
        <el-button @click="execCommand('bold')">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M8 11h4.5a2.5 2.5 0 1 0 0-5H8v5zm10 4.5a4.5 4.5 0 0 1-4.5 4.5H6V4h6.5a4.5 4.5 0 0 1 3.256 7.606A4.498 4.498 0 0 1 18 15.5zM8 13v5h5.5a2.5 2.5 0 1 0 0-5H8z"/>
          </svg>
        </el-button>
        <el-button @click="execCommand('italic')">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M15 20H7v-2h2.927l2.116-12H9V4h8v2h-2.927l-2.116 12H15z"/>
          </svg>
        </el-button>
        <el-button @click="execCommand('underline')">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M8 3v9a4 4 0 1 0 8 0V3h2v9a6 6 0 1 1-12 0V3h2zM4 20h16v2H4v-2z"/>
          </svg>
        </el-button>
      </el-button-group>

      <el-divider direction="vertical" />

      <el-button-group>
        <el-button @click="execCommand('justifyLeft')">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M3 4h18v2H3V4zm0 15h14v2H3v-2zm0-5h18v2H3v-2zm0-5h14v2H3V9z"/>
          </svg>
        </el-button>
        <el-button @click="execCommand('justifyCenter')">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M3 4h18v2H3V4zm3 15h12v2H6v-2zm-3-5h18v2H3v-2zm3-5h12v2H6V9z"/>
          </svg>
        </el-button>
        <el-button @click="execCommand('justifyRight')">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M3 4h18v2H3V4zm4 15h14v2H7v-2zm-4-5h18v2H3v-2zm4-5h14v2H7V9z"/>
          </svg>
        </el-button>
      </el-button-group>

      <el-divider direction="vertical" />

      <el-button-group>
        <el-button @click="execCommand('insertUnorderedList')">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M8 4h13v2H8V4zM4.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 6.9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM8 11h13v2H8v-2zm0 7h13v2H8v-2z"/>
          </svg>
        </el-button>
        <el-button @click="execCommand('insertOrderedList')">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M8 4h13v2H8V4zM5 3v3h1v1H3V6h1V4H3V3h2zm2 8h13v2H7v-2zm-4-1v3h2v1H1v-2h2v-1H1v-1h4zm-1 8v-1h3v4H1v-1h2v-.5H2v-1h1V18H1v-1h2zm4 1h13v2H6v-2z"/>
          </svg>
        </el-button>
      </el-button-group>

      <el-divider direction="vertical" />

      <el-color-picker 
        v-model="textColor" 
        size="small" 
        show-alpha 
        @change="handleColorChange" 
      />

      <el-select v-model="fontSize" placeholder="字号" style="width: 90px">
        <el-option
          v-for="size in fontSizes"
          :key="size"
          :label="size + 'px'"
          :value="size"
        />
      </el-select>
    </div>

    <div 
      class="editor-content" 
      ref="editorRef"
      contenteditable="true"
      @input="handleInput"
      @paste="handlePaste"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'

const props = defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const editorRef = ref<HTMLDivElement>()
const textColor = ref('#000000')
const fontSize = ref(14)
const fontSizes = [12, 14, 16, 18, 20, 24, 28, 32]

// 执行编辑命令
const execCommand = (command: string, value: string = '') => {
  document.execCommand(command, false, value)
  if (editorRef.value) {
    emit('update:modelValue', editorRef.value.innerHTML)
  }
}

// 处理颜色变化
const handleColorChange = (color: string) => {
  execCommand('foreColor', color)
}

// 监听字号变化
watch(fontSize, (newSize) => {
  execCommand('fontSize', newSize.toString())
})

// 处理输入
const handleInput = () => {
  if (editorRef.value) {
    emit('update:modelValue', editorRef.value.innerHTML)
  }
}

// 处理粘贴，只保留纯文本
const handlePaste = (e: ClipboardEvent) => {
  e.preventDefault()
  const text = e.clipboardData?.getData('text/plain')
  if (text) {
    document.execCommand('insertText', false, text)
  }
}

// 组件挂载后初始化内容
onMounted(() => {
  if (editorRef.value) {
    editorRef.value.innerHTML = props.modelValue
  }
})
</script>

<style lang="scss" scoped>
.richtext-editor {
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  
  .editor-toolbar {
    padding: 8px;
    border-bottom: 1px solid var(--el-border-color);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--el-bg-color-page);

    .el-button {
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;

      svg {
        width: 16px;
        height: 16px;
      }
    }

    .el-divider {
      margin: 0 4px;
    }
  }

  .editor-content {
    padding: 12px;
    min-height: 200px;
    outline: none;
    background: var(--el-bg-color);
    color: var(--el-text-color-primary);

    &:focus {
      outline: none;
    }
  }
}
</style>
